<template>
    <div>
        <div id="reward"></div>
        <div id="user"></div>
        <div id="post"></div>
    </div>
</template>

<script>
import { Pie,RingProgress } from '@antv/g2plot';
import { mapActions ,mapState} from 'vuex'
export default {
    computed: {
    ...mapState({
      signIn: state => state.account.signIn,
      account: state => state.account.account
    })},
    data(){
        return{
            reward_All:{waiting:11,doing:45,finished:14},
            user_All:{guest:11,verified:45,locked:14},
            post_All:[11,45,14,19,19,8,10]
        }
    },
    mounted(){
        if(this.signIn===false||this.account===null){
            this.openNotification("NOK","未登录","请先登录管理员账号!")
            this.$router.push("/mainPage/login")
        }
        else{
            this.getDataStatistic();
        }
    },
    methods:{
        ...mapActions({
            getStatistic: 'dataStatistic/getStatistic',
        }),
        getDataStatistic(){
            this.getStatistic().then((res)=>{
                this.reward_All = res.reward_All
                this.user_All = res.user_All
                this.post_All = res.post_All
                this.rewardPaint();
                this.userPaint();
                this.postPaint();
            },(error)=>{
                this.openNotification("NOK","加载出错","服务器出现问题，请重新加载")
                this.rewardPaint();
                this.userPaint();
                this.postPaint();
            })
        },
        rewardPaint(){
            const data = [
                { type: '待揭榜', value: this.reward_All.waiting },
                { type: '已揭榜', value: this.reward_All.doing },
                { type: '已完成', value: this.reward_All.finished },
            ];

            this.piePlot = new Pie('reward', {
                appendPadding: 10,
                data,
                angleField: 'value',
                colorField: 'type',
                radius: 0.8,
                label: {
                type: 'inner',
                offset: '-30%',
                content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
                style: {
                    fontSize: 14,
                    textAlign: 'center',
                    },
                },
                interactions: [{ type: 'element-active' }],
            });
            this.piePlot.render();
        },

        openNotification(type,title,msg) {
            let iconType = ''
            let iconColor = ''
            if(type=='OK'){
                iconType = 'smile'
                iconColor = '#52c41a'
            }
            else
            {
                iconType = 'frown'
                iconColor = '#eb2f96'
            }
            this.$notification.open({
                message: title,
                description: msg,
                icon: h => h('a-icon', {
                props: {
                    type: iconType,
                    theme: 'twoTone',
                    'two-tone-color': iconColor
                }
                }),
            });
        },
    }
}
</script>

<style lang="scss" scoped>

</style>